<template>
  <div style="height:100%;background: #081325;overflow:hidden">
    <dv-loading v-if="loading" style="color:#fff">Loading...</dv-loading>
    <div class="page-view" v-else>
      <div class="view-box">
        <div class="view-head">
          <Header :topTitle="topTitle"></Header>
        </div>
        <div class="view-main">
          <div class="view-body">
            <div style="display:flex">
              <div class="view-body-left">
                <LeftTop></LeftTop>
                <Left></Left>
                <LeftBottom></LeftBottom>
              </div>
              <div class="view-body-mid">
                <MidTop></MidTop>
                <MidBottom :dataProp="BottomMidData"></MidBottom>
              </div>
              <div class="view-body-right">
                <Right></Right>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../components/Header.vue'
import Left from '../components/2-Left.vue'
import Right from '../components/2-Right.vue'

import LeftTop from '../components/3-LeftTop.vue'
import LeftBottom from '../components/3-LeftBottom.vue'
import MidTop from '../components/3-MidTop.vue'
import MidBottom from '../components/3-MidBottom.vue'
import { zhexianData } from '../../../api/modules/large.screen.api'
export default {
  name: 'large-screen',
  components: {
    LeftTop,
    LeftBottom,
    MidBottom,
    MidTop,
    Header,
    Left,
    Right
  },
  data () {
    return {
      loading: true,
      topTitle: '日志统计分析可视化系统',
      BottomMidData: {}
    }
  },
  mounted () {
    this.cancelLoading()
  },
  created () {
    setTimeout(() => {
      this.BottomMidData = zhexianData
    }, 500)
  },
  methods: {
    cancelLoading () {
      setTimeout(() => {
        this.loading = false
      }, 200)
    }
  }
}
</script>

<style lang="scss" scoped>
.page-view {
  background: #081325  url('../../../assets/large-screen-icon/bg.png');
  background-size: cover;
  color: #fff;
  height: 100%;
  .view-box {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    .view-head {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 0.9375rem;
      box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
      position: relative;
      z-index: 99;
      margin-bottom: 0.125rem;
    }
    .view-main {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      overflow: hidden;
      .view-body {
        flex: 1;
        height: 100%;
        position: relative;
        margin: 0 0.25rem;
        .view-body-left{
          width:33.33%;
        }
        .view-body-mid{
          width:33.33%;

        }
        .view-body-right{
          width:33.33%;
        }
      }
    }
  }
}
</style>
<style >
.df-ac-jcsb{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
